<template>
  <div class="vs-real-time-tran" style="width: 100%;">
    <VsModuleTitle name="实时办理" />
    <div class="vs-real-time-tran__content">
      <div class="rtt-item rtt-item-one">
        <div class="rtt-item__header">
          <div class="rtt-item__header-left" @click="queryToSearchByNowDo">
            <img src="~@/assets/images/visual-screen/real-do.png" />
            在办
            <span>{{ approval.nowDo }}</span>
            件
          </div>
          <div class="rtt-item__header-right">
            超时
            <span>{{ approval.overTime }}</span>
            件
          </div>
        </div>
        <div class="rtt-item__content" @click="queryToSearchFirstState">
          <div>
            <label>乡村建设规划许可证</label>
            <span>{{ approval.pizhun }}</span>
          </div>
          <div>
            <label>农村宅基地批准书</label>
            <span>{{ approval.pizhun }}</span>
          </div>
        </div>
      </div>
      <div class="rtt-item ">
        <div class="rtt-item__header">
          <div class="rtt-item__header-left">
            <img src="~@/assets/images/visual-screen/real-approve.png" />
            本年批准
            <span>{{ approval.total }}</span>
            件
          </div>
          <div class="rtt-item__header-right">
            已办结
            <span>{{ approval.overTime }}</span>
            件
          </div>
        </div>
        <div class="rtt-item__content">
          <div @click="queryToSearchByNewBuild">
            <label>新建</label>
            <span>{{ approval.newBuild }}</span>
          </div>
          <div @click="queryToSearchByExpand">
            <label>扩建</label>
            <span>{{ approval.expand }}</span>
          </div>
          <div @click="queryToSearchByReBuild">
            <label>改建</label>
            <span>{{ approval.rebuild }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VsModuleTitle from "../ModuleTitle/index";
export default {
  name: "VsRealTimeTran",
  components: {
    VsModuleTitle
  },
  filters: {},
  props: {
    approval: Object
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  methods: {
    queryToSearchByNewBuild(row) {
      row.buildType = 3;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchByExpand(row) {
      row.buildType = 2;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchByReBuild(row) {
      row.buildType = 1;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchFirstState(row) {
      row.state = 3;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchByNowDo(row) {
      row.maxTime = 1;
      this.$router.push({
        path: "./search",
        query: row
      });
    },
    queryToSearchByOverTime(row) {
      row.maxTime = -1;
      this.$router.push({
        path: "./search",
        query: row
      });
    }
  }
};
</script>

<style lang="less">
.vs-real-time-tran {
  height: 30%;

  &__content {
    height: 100%;
    background-color: rgba(12, 26, 58, 0.4);

    .rtt-item {
      padding: 20px 10px 0;
      box-sizing: border-box;

      &__header {
        box-sizing: border-box;
        padding-left: 10px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: PingFangSC-Regular;

        &:before {
          content: "";
          position: absolute;
          top: 15px;
          left: 0;
          width: 100%;
          height: 25px;
          background-color: rgba(193, 230, 26, 0.06);
        }

        &-left {
          display: flex;
          align-items: center;
          cursor: pointer;
          font-family: PingFangSC-Semibold;

          img {
            margin-right: 10px;
          }

          span {
            cursor: pointer;
            margin: 0 3px;
            font-family: antonio-bold !important;
            font-size: 25px;
            color: #c1e61a;
            letter-spacing: 0;
            text-align: center;
            text-shadow: 0 0 4px #4f4f4f;
          }
        }

        &-right {
          display: flex;
          align-items: center;
          margin-right: 5px;

          span {
            margin: 0 3px;
            font-size: 25px;
            color: #9cefff;
            letter-spacing: 0;
            text-align: center;
            text-shadow: 0 0 4px #4f4f4f;
            cursor: pointer;
            font-family: antonio-bold !important;
          }
        }
      }

      &__content {
        display: flex;
        justify-content: space-around;
        cursor: pointer;
        font-family: PingFangSC-Regular;
        > div {
          position: relative;
          box-sizing: border-box;
          margin-top: 15px;
          height: 67px;
          min-width: 125px;
          border-left: 1px solid rgba(108, 236, 255, 0.15);
          display: flex;
          flex-direction: column;

          &:after {
            content: "";
            height: 4px;
            width: 4px;
            left: -2px;
            position: absolute;
            background: #6cecff;
          }

          label {
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 0;
            text-align: center;
            line-height: 18px;
          }

          span {
            margin-top: 5px;
            font-family: antonio-bold !important;
            font-size: 25px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;
            text-shadow: 0 0 4px rgba(193, 230, 26, 0.73);
            cursor: pointer;
          }
        }
      }
    }

    .rtt-item-one {
      .rtt-item__header {
        &-right {
          span {
            color: #eb4e00;
            text-shadow: 0 0 4px #eb4e00;
            cursor: pointer;
          }
        }
      }

      .rtt-item__content {
        > div {
          width: 50%;
          border-left-color: rgba(193, 230, 26, 0.15);

          &:after {
            content: "";
            height: 4px;
            width: 4px;
            left: -2px;
            position: absolute;
            background: #c1e61a;
          }
        }
      }
    }
  }
}
</style>
